<template>
  <div id="rtDetail">
    <el-row style="margin-top:20px;position:relative;">
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16">
        <el-row style="margin-top:10px">
          <el-col :span="17" style="background-color:white">
            <div style="padding:20px">
              <div>
                <el-image style="width:100%;" fit="fit" alt=""
                          :src="resumeTemplate.coverUrl"></el-image>
                <div>
                  <el-descriptions :column="3" style="padding-top:20px;">
                    <el-descriptions-item label="模板名称">{{ resumeTemplate.name }}</el-descriptions-item>
                    <el-descriptions-item label="发布者">{{ resumeTemplate.adminName }}</el-descriptions-item>
                    <el-descriptions-item label="发布时间">{{ resumeTemplate.createTime }}</el-descriptions-item>
                  </el-descriptions>
                  <div style="text-align: center;margin: 50px">
                    <el-button type="primary" style="width:130px" @click="dialogVisible=true">
                      下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="hot_article">
              <div class="choice">
                <span style="font-size:18px;color: #606266;">下载热榜</span>
                <el-divider direction="horizontal"></el-divider>
                <div class="choice_title"><span class="choice_index" style="color:#d9000c;">1</span>
                  <span>财务会计求职简历模板</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#f55e3d;">2</span>
                  <span>财务会计求职简历模板</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#ff9821;">3</span>
                  <span>财务会计求职简历模板</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">5</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">6</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">8</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">9</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">10</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
    </el-row>
    <el-dialog
        title="请您确认下载"
        :visible.sync="dialogVisible"
        width="30%">
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="download">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getRT} from "@/network/recruit";
import {getPersonInfo} from "@/network/user";

export default {
  name: "ResumeTemplateDetail",
  data(){
    return {
      resumeTemplateId:'',
      resumeTemplate:{},
      dialogVisible:false,
      user:'',
    }
  },
  mounted() {
    if(this.$route.params.resumeTemplateId!=undefined) {
      sessionStorage.setItem("resumeTemplateId", this.$route.params.resumeTemplateId);
    }
     this.resumeTemplateId= sessionStorage.getItem("resumeTemplateId");
    this.showRT();
  },
  methods:{
    showRT(){
      getRT(this.resumeTemplateId).then(res=>{
        this.resumeTemplate= res.data.data;
      })
    },
    download(){
      if(localStorage.getItem("common_userName")){
        if(this.resumeTemplate.pay==0){
          window.location.href = this.resumeTemplate.downloadUrl;
        }else{
          getPersonInfo(localStorage.getItem("common_userName")).then(res=>{
            this.user = res.data.data;
            if(this.user.vip !=0){
              window.location.href = this.resumeTemplate.downloadUrl;
            }else{
              this.$message.warning("您还不是会员，请先开通会员！");
            }
          })
        }
      }else{
        this.$message.warning("您还没登录，请先登录！");
        this.$router.push("/login");
      }

    }
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  height: 460px;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}

.choice_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: #414a60;
  margin: 15px 0;
}

.choice_index {
  display: inline-block;
  width: 20px;
  font-family: kanzhun-Regular, kanzhun;
  margin-right: 5px;
  color: #8b8e99;
}
</style>